<style>
  .copyright, .bottom-nav { display: none; }
  .pd10 {
     padding: 10px;
  }
  .cart-lists {
    position: relative;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #eaeaea;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
   }
   .cart-lists .good-name {
    border-bottom: 1px solid #eaeaea;
   }
   .good-info:last-child {
    border-bottom: 0;
   }
   .cart-lists .good-info {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
   }
   .good-info .good-pic {
    float: left;
    overflow: hidden;
    margin-right: 10px;
    width: 50px;
    height: 50px;
  }
  .good-info .info-item {
    overflow: hidden;
  }
  .good-del {
    position: absolute;
    bottom: 13px;
    left: 10px;
}
.total-price {
    position: fixed;
    bottom: 48px;
    padding-left: 10px;
    width: 100%;
    height: 50px;
    max-width: 640px;
    border-top: 1px solid #ddd;
    background-color: #fff;
    line-height: 50px;
}
.total-price p {
    float: left;
}
.total-price em {
    color: #f00;
}
.total-price button {
  float: right;
  width: 90px;
  height: 50px;
  border-radius: 0;
  background-color: #ff6f3d;
  border:none;
  color:white;
  margin:0;
}
</style>


<!-- 购物车里面没有东西 -->
<empty name="cartItems">

<div class="empty empty-cart pd10">
  <div class="order-logo"></div>
  <p class="message">您的购物车空空如也~</p>
  <div class="lists">
  <a class="lists-item" href="{$product.url}">去购物</a>
  </div>
</div>

<else/>
<!-- 购物车里面有东西 -->
<div class="pd10">
  <volist name="cartItems" id="vo_product">
  <volist name="vo_product.items" id="vo_attr">
  <section class="cart-lists">
  <header class="good-name">{$vo_product.name}</header>
  <div class="good-info">
    <a class="good-pic"><img src="{:getImageUrl($vo_attr['pic'], 'small')}"></a>
    <div class="info-item">
    <p>
      <span class="key">规格： <foreach name="vo_attr.attrs" item="vo1" key="k">{$k}:{$vo1}&nbsp;&nbsp;</foreach></span>
    </p>
    <p>
      <span class="key sub-price" data-subprice="{$vo_attr.productPrice}">单价：￥{$vo_attr.productPrice}</span>
    </p>
    <div class="clearfix">
      <span class="key fl">数量：</span>
      <span class="product-number"><span class="buy-num-minus" data-business-id="{$vo_attr.businessId}" data-product-id="{$vo_product.productId}">-</span><input class="buy-num" name="quantity" readonly="readonly" value="{$vo_attr.quantity}"><span class="buy-num-plus" data-business-id="{$vo_attr.businessId}" data-product-id="{$vo_product.productId}">+</span></span>
    </div>
    </div>
    <a class="good-del" data-business-id="{$vo_attr.businessId}" data-product-id="{$vo_product.productId}">删除</a>
  </div>
  </section>
  </volist>
  </volist>
  
</div>

<footer class="total-price">
  <form action="{:U('Order/confirmOrder')}" method="post">
  <input type="hidden" name="sid" value="{$sid}">
  <p>合计（不含运费）：<em id="total-price"></em></p>
  <button type="submit" class="btn btn-orange">结算</button>
  </form>
</footer>
<div style="height:48px;"></div>
<script type="text/javascript">
  (function(){
  
    //初始计算总价格
    updateTotalPrice();
    
    var oDel = document.querySelectorAll ( ".cart-lists .good-del" );
    for ( var i=0, l = oDel.length; i < l; i++ ) {
      oDel[i].addEventListener ( "click", removeGood, false );
    };
    //从购物车中移除
    function removeGood() {
      var good = {},
      _this = this;
      good.businessId = this.getAttribute( "data-business-id" );
      good.productId = this.getAttribute( "data-product-id" );
      good.sid = {$sid};
      GH.ajax( "__CONTROLLER__/removeItem", good, function(data){
        GH.showMessage( data.msg );
        if ( data.error == 0 ) {
          _this.parentNode.parentNode.style.opacity = 0;
          setTimeout(function(){
            _this.parentNode.parentNode.parentNode.removeChild(_this.parentNode.parentNode);
            updateTotalPrice();
          }, 500);
        }
      }, "post")
    }
    
    //购买数量的更新
    var  oCartList = document.querySelectorAll ( ".cart-lists" );
    for ( var i=0; item=oCartList[i]; i++ ) {
      var oMinus = item.querySelector ( ".buy-num-minus" ),
      oPlus = item.querySelector ( ".buy-num-plus" );
      oMinus.addEventListener( "click", function(){
        changeNumber ( this, false );
      }, false );
      oPlus.addEventListener( "click", function(){
        changeNumber ( this, true );
      }, false );
    }
    
    function changeNumber( btn, plus ) {
      var input = btn.parentNode.querySelector ( ".buy-num" );
      var v = parseInt( input.value );
      if ( plus ) {
        input.value = v + 1;
      } else {
        ( v <= 1 ) || ( input.value = v - 1 );
      }
      var good = {}; //发送给后台的数据
      good.businessId = btn.getAttribute( "data-business-id" );
      good.productId = btn.getAttribute( "data-product-id" );
      good.quantity = input.value;
      good.sid = {$sid};
      GH.ajax ( "__CONTROLLER__/updateQuantity", good, function(data){
        ( data.error == 1 ) && GH.showMessage ( data.msg );
        ( data.error == 0 ) && updateTotalPrice();
      }, "post" );
    }
    
    //更新购物车总价钱
    function updateTotalPrice() {
      var  oCartList = document.querySelectorAll ( ".cart-lists" );
      var total = 0; //总价钱
      var count = 0; //购车车总数量
      for ( var i = 0; item = oCartList[i]; i++ ) {
        var subPrice = item.querySelector ( ".sub-price" ).getAttribute( "data-subprice" ),
        number = parseInt( item.querySelector ( ".buy-num" ).value );
      
        total += subPrice * number;
        count += number;
        console.log((subPrice*number).toFixed(2));
   
      }
      document.getElementById( "total-price" ).innerHTML = "￥" + total;
      document.getElementById( "cartCount" ).innerHTML = count;
    }
  })();
    
  (function(){
    window.addEventListener("load", function(){
      //放一个元素留出距离
      var oDiv = document.createElement("div");
      oDiv.style.height = "40px";
      document.body.appendChild( oDiv );
    }, false);
  })();
</script>
</empty>
